import DocCardBox from "@/components/doc-card"
import React from "react"
import { Demo, demoJson } from "./demo"
import { DocApi, DocTitle } from "@/components"
import { useTranslation } from "react-i18next"

const leftList = [
    {
        titleKey: "default",
        hash: "fm-l-demo1",
        coms: [<Demo key={0} />],
        comsJson: [demoJson()],
        desc: [{ text: "fm_1_1_1" }]
    },
    {
        titleKey: "disabled",
        hash: "fm-l-demo2",
        coms: [<Demo key={0} disabled={true} />],
        comsJson: [demoJson("disabled")],
        desc: [{ text: "fm_3_1_1" }]
    }
]

const rightList = [
    {
        titleKey: "readonly",
        hash: "fm-r-demo1",
        coms: [<Demo key={0} readOnly={true} />],
        comsJson: [demoJson("readOnly")],
        desc: [{ text: "fm_2_1_1" }]
    },
    {
        titleKey: "onValuesChange/rules",
        hash: "fm-r-demo2",
        coms: [<Demo key={0} isVC isRules />],
        comsJson: [demoJson("onValuesChange={onValuesChange}", true, true)],
        desc: [{ text: "fm_4_1_1" }]
    }
]

function FormDoc() {
    const { t } = useTranslation()

    const apiList = [
        {
            title: "FormProps",
            data: [
                {
                    schema: "form",
                    type: "",
                    defaultValue: "-",
                    isRequire: t("yes"),
                    desc: t("desc_fm_1")
                },
                {
                    schema: "size",
                    type: "ComponentSize",
                    defaultValue: "normal",
                    isRequire: t("no"),
                    desc: t("desc_fm_2")
                },
                {
                    schema: "initialValues",
                    type: "ObjectType",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_fm_3")
                },
                {
                    schema: "disabled",
                    type: "boolean",
                    defaultValue: "false",
                    isRequire: t("no"),
                    desc: t("desc_fm_4")
                },
                {
                    schema: "readOnly",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_fm_5")
                },
                {
                    schema: "colon",
                    type: "boolean",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_fm_6")
                },
                {
                    schema: "errorType",
                    type: "FormErrorType",
                    defaultValue: "tip",
                    isRequire: t("no"),
                    desc: t("desc_fm_7")
                },
                {
                    schema: "validateMessages",
                    type: "ValidateMessages",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_fm_8")
                },
                {
                    schema: "onFinish",
                    type: "() => void",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_fm_9")
                },
                {
                    schema: "onFinishFailed",
                    type: "() => void",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_fm_10")
                },
                {
                    schema: "onValuesChange",
                    type: "(o) => void",
                    defaultValue: "-",
                    isRequire: t("no"),
                    desc: t("desc_fm_11")
                },
                {
                    schema: "classNames",
                    type: "FormClassNames",
                    defaultValue: "",
                    isRequire: t("no"),
                    desc: t("desc_fm_12")
                }
            ]
        }
    ]
    return (
        <div>
            <DocTitle title="Form" desc="formDesc" />
            <DocCardBox leftList={leftList} rightList={rightList} />
            <DocApi list={apiList} />
        </div>
    )
}

export default FormDoc
